<template>
	<view class="container" v-cloak>
		<u--form labelWidth="110" :borderBottom="false" labelPosition="left" :model="model" :rules="rules" ref="uForm">
			<template v-if="type == 0">
				<u-form-item label="喂食名称" prop="name" borderBottom >
					<u--input v-model="model.name" border="none" placeholder="请输入食物"></u--input>
				</u-form-item>
				<u-form-item label="喂食量(g)" prop="num" borderBottom @click="showSex = true; " >
					<u--input type="number" v-model="model.num" border="none" placeholder="请输入喂食量"></u--input>
				</u-form-item>

			</template>
			<template v-else-if="type == 1">
				<u-form-item label="喂水量(ml)" prop="num" borderBottom @click="showSex = true; " >
					<u--input type="number" v-model="model.num" border="none" placeholder="请输入喂水量"></u--input>
				</u-form-item>
			</template>
			<template v-else-if="type == 2">
				<u-form-item label="疫苗类型" prop="type_id" borderBottom @click="showSheet = true; " >
					<u--input v-model="typeName" disabled disabledColor="#ffffff" border="none"
						placeholder="请选择疫苗类型"></u--input>
					<u-icon slot="right" name="arrow-down"></u-icon>
				</u-form-item>

				<u-form-item label="使用药品" prop="name" borderBottom @click="showSex = true; " >
					<u--input v-model="model.name" border="none" placeholder="请输入使用药品"></u--input>
				</u-form-item>
			</template>
			<template v-else-if="type == 3 ">
				<u-form-item label="驱虫类型" prop="type_id" borderBottom @click="showSheet = true; " >
					<u--input v-model="typeName" disabled disabledColor="#ffffff" border="none"
						placeholder="请输入驱虫类型"></u--input>
					<u-icon slot="right" name="arrow-down"></u-icon>
				</u-form-item>
				<u-form-item label="使用药品" prop="name" borderBottom @click="showSex = true; " >
					<u--input v-model="model.name" border="none" placeholder="请输入使用药品"></u--input>
				</u-form-item>
			</template>
			<template v-else-if="type == 4 ">
				<u-form-item label="铲砂类型" prop="type_id" borderBottom @click="showSheet = true; " >
					<u--input v-model="typeName" disabled disabledColor="#ffffff" border="none"
						placeholder="请选择铲砂类型"></u--input>
					<u-icon slot="right" name="arrow-down"></u-icon>
				</u-form-item>
			</template>
			<!-- <template v-else-if="type == 5 ">
				<u-form-item label="铲砂类型" prop="model2" borderBottom @click="showSex = true; " >
					<u--input v-model="model.model2" border="none" placeholder="请输入铲砂类型"></u--input>
				</u-form-item>
			</template> -->
			<u-form-item label="服务日期" prop="service_date" borderBottom @click="showDate1 = true; " >
				<u--input v-model="model.service_date" disabled disabledColor="#ffffff" placeholder="请选择服务日期"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-down"></u-icon>
			</u-form-item>
			<u-form-item label="下次执行日期" prop="next_date" borderBottom @click="showDate2 = true; " >
				<u--input v-model="model.next_date" disabled disabledColor="#ffffff" placeholder="请选择下次执行日期"
					border="none"></u--input>
				<view slot="right" style="display: flex;align-items: center;">
					<view v-if="model.next_date" @click.stop="model.next_date = ''" style="padding: 3px 10px;">
						<u-icon name="close"></u-icon>
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</u-form-item>
			<template v-if="type == 4 ">
				<u-form-item label="是否异常" prop="is_diff" borderBottom @click="diffShow = true; " >
					<u--input v-model="diffName" disabled disabledColor="#ffffff" border="none"
						placeholder="请选择"></u--input>
					<u-icon slot="right" name="arrow-down"></u-icon>
				</u-form-item>
			</template>
		</u--form>
		<u--textarea border="none" v-if='type == 4 && model.is_diff == 1' v-model="model.remark"
			placeholder="请输入异常情况"></u--textarea>
		<u-datetime-picker :formatter="formatter" @cancel="showDate1=false" @confirm="onConfirm" :show="showDate1"
			mode="datetime"></u-datetime-picker>
		<u-datetime-picker :minDate="minDate" :formatter="formatter" @cancel="showDate2=false" @confirm="onConfirm"
			:show="showDate2" mode="datetime"></u-datetime-picker>
		<cu-button-wrap>
			<u-button :customStyle="{width:'670rpx',height:'104rpx',borderRadius:'104rpx'}" type="primary" text="保存"
				@click="onSave"></u-button>
		</cu-button-wrap>
		<u-action-sheet cancelText="取消" :actions="[{
					name:'是',
					id:1
				},{
					name:'否',
					id:0
				}]" :show="diffShow" @select="diffSelect" @close="diffShow =false"></u-action-sheet>
		<!-- 驱虫类型 -->
		<u-picker keyName="name" :defaultIndex="defaultIndex" @cancel="showSheet = false" :show="showSheet"
			:columns="columns" @confirm="onActionSheet"></u-picker>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				// 类型选择
				defaultIndex: '',
				showSheet: false,
				columns: [],
				typeName: '',
				diffName: '否',
				diffShow: false, //是否异常
				model: {
					id:'',
					is_diff: 0, //是否异常
					name: '', //药品名称 喂食名称
					num: '', //喂食数量
					type_id: '', //驱虫类型id
					service_date: '', //服务时间
					next_date: '', //下次服务时间
					remark: ''
				},
				showDate1: false, //服务日期
				showDate2: false,
				rules: {},
				sheetList: [],
				type: 0,
				archive_id: '',
				id: '', //记录id
				minDate: ''

			}
		},
		onLoad(options) {
			this.archive_id = options.archive_id;
			this.type = options.type;
			let title = ['添加喂食记录', '添加饮水记录', '添加疫苗记录', '添加驱虫记录', '添加铲砂记录'][this.type]
			if (options.id) {
				this.id = options.id;
				title = title.replace('添加', '编辑')
				let itemCell = uni.getStorageSync('itemCell');
				console.log('itemCell', itemCell);
				this.model.id = itemCell.id || '';
				this.model.is_diff = itemCell.is_diff || 0;
				this.model.name = itemCell.name || '';
				this.model.num = itemCell.num || '0';
				this.model.type_id = itemCell.type_id || '';
				this.model.service_date = itemCell.service_date || '';
				this.model.next_date = itemCell.next_date || '';
				this.model.remark = itemCell.remark || '';
				this.diffName = ['否', '是'][itemCell.is_diff]
				this.typeName = itemCell.type_id_name

			}
			uni.setNavigationBarTitle({
				title: title
			})
			this.loadTypeList();
		},
		methods: {

			// 是否异常
			diffSelect(e) {
				this.model.is_diff = e.id;
				this.diffName = e.name;
				this.diffShow = false;
			},
			// 加载类型
			async loadTypeList() {
				let res = null;
				if (this.type == 2) {
					res = await this.$Net.get(this.$api.pet_list_cate_vacc, {});
				} else if (this.type == 3) {
					res = await this.$Net.get(this.$api.pet_list_cate_kins, {});
				} else if (this.type == 4) {
					res = await this.$Net.get(this.$api.pet_list_cate_sand, {});
				}
				if (res) {
					this.columns = [res];
					console.log('this.columns', this.columns);
				}
			},
			onActionSheet(e) {
				if (this.type == 3 || this.type == 2 || this.type == 4) {
					this.model.type_id = e.value[0].id;
					this.typeName = e.value[0].name;
				}
				this.showSheet = false
				console.log('e', e);
			},
			// 保存
			async onSave() {
				// 校验
				let verify = false,
					msg = '';
				console.log('model', this.model);
				if (this.type == 0) {
					if (!this.model.name) {
						msg = '请填写食物名称'
						verify = true
					}
					if (!this.model.num) {
						msg = '请填写食物数量'
						verify = true
					}
				}
				if (this.type == 1) {
					if (!this.model.num) {
						msg = '请填写喂水量'
						verify = true
					}
				}
				if (this.type == 2) {
					if (!this.model.name) {
						msg = '请填写药品名称'
						verify = true
					}
					if (this.model.type_id === '') {
						msg = '请选择疫苗类型'
						verify = true
					}
				}
				if (this.type == 3) {
					if (!this.model.name) {
						msg = '请填写药品名称'
						verify = true
					}
					if (this.model.type_id === '') {
						msg = '请选择驱虫类型'
						verify = true
					}
				}
				if (verify) {
					this.$Msg.Toast(msg || '请填写内容');
					return
				}
				let res = null;

				this.model['archive_id'] = this.archive_id;
				let url = [this.$api.pet_feed_save, this.$api.pet_water_save, this.$api.pet_vaccium_save, this.$api
					.pet_insect_save,
					this.$api.pet_sand_save
				][this.type];
				res = await this.$Net.post(url, this.model,1);
				console.log('res == >', res);
				if (res) {
					this.$Msg.Toast(res.msg || '保存成功');
				
					this.$Jump.Back();
				}
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type == 'hour') {
					return `${value}时`
				}
				if (type == 'minute') {
					return `${value}分`
				}
				return value
			},
			onConfirm(e) {
				if (this.showDate1) {
					this.model.service_date = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM');
					this.showDate1 = false;
					// 下次执行日期 最小时间
					this.minDate = e.value;
					this.model.next_date = ''
				}
				if (this.showDate2) {
					this.model.next_date = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM');
					this.showDate2 = false;
				}
				// this.model.model4 = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM');
				// console.log('e', e.value);
				// this.showDate1 = false;
				// this.showDate2 = false;
			},
			// onActionSheet(e) {
			// 	if (this.sheetCurrent == 0) {
			// 		this.form.module = e.name;
			// 	} else {
			// 		this.form.privacy = e.name;
			// 	}
			// 	this.showSheet = false;
			// }
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-popup__content {
		overflow: hidden;
	}

	::v-deep .u-textarea {
		border-radius: 12px !important;
		background: #F1F1F1 !important;
		margin-top: 40rpx;
	}

	::v-deep .u-form {
		.u-line {
			display: none !important;
		}
	}

	.v-cloak {
		display: none
	}
</style>